<template>
  <div class="yeji-con">
    <div class="yeji-title">当天跟进记录</div>
    <el-table :data="chartData" height="290px">
      <el-table-column label="姓名" prop="nickName"></el-table-column>
      <el-table-column label="部门" prop="deptName"></el-table-column>
      <el-table-column label="客户数量" prop="customerNum"></el-table-column>
      <el-table-column label="记录数量" prop="recordNum"></el-table-column>
      <slot name="col"></slot>
    </el-table>
  </div>
</template>

<script>
import {getRecordList} from "@/api/home";
export default {
  data() {
    return {
      chartData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      //调用接口实现
      getRecordList().then(res => {
        if (res.code == 200) {
          this.chartData = res.data;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.yeji-con{
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 24px;
  min-height: 350px;
  .yeji-title{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
  }
  .yeji-chart{
    .yeji-chart-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 49px;
      padding: 0 14px;
      border-radius: 4px;
      background: #F7F7F7;
      margin-top: 10px;
      &:nth-child(1){
        background: #FEF8EC;
        .item-left-bg{
          background: url('../../assets/images/yeji-1.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      &:nth-child(2){
        background: #ECF2FF;
        .item-left-bg{
          background: url('../../assets/images/yeji-2.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      &:nth-child(3){
        background: #FFF3ED;
        .item-left-bg{
          background: url('../../assets/images/yeji-3.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      .item-left-bg{
        width: 29px;
        height: 29px;
        background: rgba(0, 118, 255, .1);
        border-radius: 50%;
        line-height: 29px;
        text-align: center;
        color: #0076FF;
      }
      .item-name{
        flex: 1;
        margin-left: 28px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .item-amout{
        display: flex;
        align-items: center;
        text-align: right;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        letter-spacing: 2px;
        .unit-text{
          font-size: 14px;
          color: #A0A0A0;
        }
      }
    }
  }
}
</style>
